import Mock from "../../../../mock/userMock"
import axios from "axios"
import { useEffect, useState } from "react"
import ColumnComponent from "../../../../components/ColumnComponent"

interface ListItem {
    username: string,
    password: string,
    permission: string
}

function userList() {
    Mock()

    const column = [
        {
            title: '用户名',
            key: 'username',
            dataIndex: 'username',
            type: 'input'
        },
        {
            title: '密码',
            key: 'password',
            dataIndex: 'password',
            type: 'input'
        },
        {
            title: '角色',
            key: 'permission',
            dataIndex: 'permission',
            type: 'select'
        },
    ]
    const [data, setDatas] = useState< ListItem[]>([])
    useEffect(() => {
        axios.get('/api/userlist').then(res => {
            setDatas(res.data as ListItem[]);
        }).catch(error => {
            console.log(error);
        });
    }, []); // 空依赖数组表示只在组件挂载时执行一次 

    return (
        <>
            <ColumnComponent column={column} data={data} />
        </>
    )
}

export default userList